<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/backStage.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="css/backiconfont/iconfont.css"
    />
    <title>Document12</title>
  </head>
  <body>
    <!-- 弹窗 -->
    <div class="mask">
      <div class="window">
        <div class="cancel">x</div>
        <ul id="addinfo">
          <li>
            <label for="">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
            <input type="text" name="id" autocomplete="off" />
          </li>
          <li>
            <label for="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
            <input type="text" name="name" autocomplete="off" />
          </li>
          <li>
            <label for="">入学年份</label
            ><input type="text" name="year" autocomplete="off" />
          </li>
          <li>
            <label for=""> 院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系</label>
            <input type="text" name="department" autocomplete="off" />
          </li>
          <li>
            <label for=""> 班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级</label>
            <input type="text" name="class" autocomplete="off" />
          </li>
        </ul>
        <button type="button" class="add">添加</button>
      </div>
    </div>
    <div class="top">
      <i class="iconfont">&#xe655;</i>
      学校后台管理系统
      <button type="button" class="backBtn">
        <i class="iconfont back">&#xe620;</i>
      </button>
    </div>
    <div class="viewport">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <ul class="header">
          <div class="head-img">
            <img src="img/head.jpg" alt="" />
          </div>
          <p>Gloria</p>
        </ul>
        <ul class="nav">
          <li><i class="iconfont">&#xe609;</i>&nbsp;学生信息管理</li>
          <li><i class="iconfont">&#xe605;</i>&nbsp;教师信息管理</li>
          <li><i class="iconfont">&#xe62a;</i>&nbsp;管理员信息管理</li>
          <li><i class="iconfont">&#xe686;</i>&nbsp;部门管理</li>
          <li><i class="iconfont">&#xe637;</i>&nbsp;设置</li>
        </ul>
      </div>
      <div class="content">
        <p>学生信息管理</p>
        <div class="info">
          <!-- 添加 -->
          <div id="search-add">
            <div class="search">
              <input type="text" name="search" placeholder="请输入姓名或学号" />
              <button type="button" id="search">
                <i class="iconfont">&#xe621;</i>查询
              </button>
            </div>
            <button type="button" class="addBtn">
              <i class="iconfont">&#xe61f; </i>添加
            </button>
          </div>
          <!--刷新模块  -->
          <div class="refresh">
            <button type="button" class="fresh">
              <i class="iconfont">&#xe641;</i>
            </button>
          </div>
          <!-- 学生内容 -->
          <div id="stu-info">
            <table id="stu">
              <caption>
                学生信息
              </caption>
              <thead>
                <tr>
                  <th>学号</th>
                  <th>姓名</th>
                  <th>入学年份</th>
                  <th>院系</th>
                  <th>班级</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="tb">
                <tr>
                  <td>230001</td>
                  <td>张三</td>
                  <td>2023</td>
                  <td>经济管理</td>
                  <td>231</td>
                  <td>
                    <button type="button" class="remove" onclick="delRow(this)">
                      <i class="iconfont">&#xe61c;</i>
                    </button>
                    <button
                      type="button"
                      class="edit"
                      onclick="updateRow(this)"
                    >
                      <i class="iconfont">&#xe8cf;</i>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>230002</td>
                  <td>李四</td>
                  <td>2023</td>
                  <td>经济管理</td>
                  <td>231</td>
                  <td>
                    <button type="button" class="remove" onclick="delRow(this)">
                      <i class="iconfont">&#xe61c;</i>
                    </button>
                    <button
                      type="button"
                      class="edit"
                      onclick="updateRow(this)"
                    >
                      <i class="iconfont">&#xe8cf;</i>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>230003</td>
                  <td>王五</td>
                  <td>2023</td>
                  <td>经济管理</td>
                  <td>231</td>
                  <td>
                    <button type="button" class="remove" onclick="delRow(this)">
                      <i class="iconfont">&#xe61c;</i>
                    </button>
                    <button
                      type="button"
                      class="edit"
                      onclick="updateRow(this)"
                    >
                      <i class="iconfont">&#xe8cf;</i>
                    </button>
                  </td>
                </tr>
              </tbody>
              <tfoot></tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="js/backstage.js"></script>
</html>
